var QrCode = function () {
  var template = /* html */ `
    <div class="qr-code">
      <div ref="dataCode" class="qr-code-img" v-if="isShow">
        <div class="qr-code-div" ref="qrCode"></div>
        <div style="text-align:center;font-size:20px;margin-top:6px">
          <span class="qr-code-text" ref="qrCodeText" :style="{'font-size':fontSize+'px'}">
            <slot></slot>
          </span>
        </div>
      </div>
      <div class="qr-code-img">
        <img :src="imgUrl">
      </div>
    </div>
  `;

  return {
    props: {
      data: {
        type: Object,
        default: function () {
          return null;
        }
      },
      url: {
        type: String,
        required: true
      },
      correctLevel: { //H: 2 L: 1 M: 0 Q: 3
        type: Number,
        default: QRCode.CorrectLevel.L
      },
      fontSize: {
        type: Number,
        default: 20
      }
    },

    data: function () {
      return {
        isShow: true,
        qrcode: null,
        imgUrl: ''
      };
    },

    mounted: function () {
      this.createQrcode();
      setTimeout(() => {
        this.drawQrcode();
      }, 500);
    },

    methods: {
      createQrcode: function () {
        var url = this.url;
        var data = this.data;
        var formParam = SysUtil.formatFormParam(data);
        url = `${url}?${formParam}`;

        var qrCodeEl = this.$refs['qrCode'];
        this.qrcode = new QRCode(qrCodeEl, {
          text: url,
          width: 150,
          height: 150,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: this.correctLevel
        });
      },

      drawQrcode: function () {
        var canvas = document.createElement('canvas');
        var $cardCode = $(this.$refs['dataCode']);
        var canvasWidth = $cardCode.width();
        var canvasHeight = $cardCode.height();
        canvas.width = canvasWidth;
        canvas.height = canvasHeight;

        var imgDom = $(this.$el).find('.qr-code-div img')[0];
        var ctx = canvas.getContext('2d');
        ctx.fillStyle = "#ffffff";
        ctx.fillRect(0, 0, canvasWidth, canvasHeight);
        ctx.drawImage(imgDom, (canvasWidth - imgDom.width) / 2, 0);

        var textDom = this.$refs['qrCodeText'];
        var textWidth = $(textDom).width();
        ctx.fillStyle = "#000000";
        ctx.font = `${this.fontSize}px Arial`;
        var text = $(textDom).text().trim();

        var x = (canvasWidth - textWidth) / 2;
        var y = 174;
        if (x > this.fontSize) {
          ctx.fillText(text, (canvasWidth - textWidth) / 2, 174);
        } else {
          var lineWidth = 0;
          var lineHeight = this.fontSize + 5;
          var lastSubStrIndex = 0;
          for (var i = 0; i < text.length; i++) {
            lineWidth += ctx.measureText(text[i]).width;
            if (lineWidth > canvasWidth - this.fontSize) {
              ctx.fillText(text.substring(lastSubStrIndex, i), x, y);
              y += lineHeight;
              lineWidth = 0;
              lastSubStrIndex = i;
            } else if (i === text.length - 1) {
              x = (canvasWidth - lineWidth) / 2;
              ctx.fillText(text.substring(lastSubStrIndex, i + 1), x, y);
            }
          }
        }

        this.imgUrl = canvas.toDataURL('image/jpeg', 1.0);
        this.isShow = false;
      }
    },

    template: template
  };
}();
